<template>
  <div id="app">
    <h1>vuex的练习c</h1>
    <hr />
    <counter></counter>
    <amount></amount>
    <!-- 传参练习 -->
    <button @click="newAdd(10)">增加10</button>
    <div>数量{{count}}</div>
    <div>{{optCount}}</div>
  </div>
</template>

<script>
import counter from "./components/counter.vue";
import amount from "./components/amount.vue";

import { mapState, mapMutations,mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {};
  },
  components: {
    counter,
    amount,
  },
  methods: {
    ...mapMutations(['add']),
    ...mapActions(["newAdd"]),
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["optCount"]),
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
